<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select class="filter-item" v-model="queryParams.groupId" placeholder="全部门站" @change="selectGroupChange">
            <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select class="filter-item" v-model="queryParams.sn" placeholder="全部仪表" @change="selectSNChange">
            <el-option v-for="item in  deviceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16">
          <el-radio-group v-model="queryParams.time" @change="timeRangeChange">
            <el-radio-button class="ww-btn-radio" label="day" style="border-radius: 5px">日</el-radio-button>
            <el-radio-button class="ww-btn-radio" label="month" style="margin-left: 5px;margin-right: 5px;">月
            </el-radio-button>
            <el-radio-button class="ww-btn-radio" label="year" style="border-radius: 5px">年</el-radio-button>
          </el-radio-group>

          <el-date-picker
            class="ww-border"
            v-model="dates"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <div class="ww-border four-corner" :id="'watch-'+ i" v-for="(item,i) in opitonList"
           :style="{width: '100%', height: '300px'}">

      </div>
    </el-row>

    <!-- 设备注册 -->
  </div>
</template>

<script>
  import {fetchList} from '../../api/group'
  import {fetchDeviceList} from '../../api/device'
  import {months, hours} from '../config/index'
  import {yearDatas, monthDatas, dayDatas} from './data'

  export default {
    name: 'gas-jiance',
    directives: {},
    data() {
      return {
        time: null,
        rgLoading: null,
        dates: [],
        groups: [],
        selectRowData: {},
        tableData: [],
        deviceList: [],
        tableKey: 0,
        opitonList: [{name: '仪表001'}],
        list: [],
        queryParams: {
          time: 'year',
          groupId: '',
          sn: '',
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        listLoading: true,
        temp: {
          id: '',
          name: ''
        },
        rgParam: {
          sn: '',
          groupId: ''
        },
        textMap: {
          update: '编辑',
          create: '创建'
        },
        dialogPvVisible: false,
        pvData: [],
        rules: {
          sn: [{required: true, message: 'sn必填', trigger: 'blur'}],
          groupId: [{required: true, message: 'sn必填', trigger: 'blur'}]
        }
      }
    },
    filters: {},
    created() {
      this.getGroups()
    },
    mounted() {
      this.handleMounted(months, monthDatas)
    },
    methods: {
      timeRangeChange() {
        let x = []
        let y = []
        const time = this.queryParams.time
        if (time === 'year') {
          x = months
          y = yearDatas
        } else if (time === 'month') {
          x = []
          y = monthDatas
        } else {
          x = hours
          y = dayDatas
        }
        this.handleMounted(x, y)
      },
      selectGroupChange(groupId) {
        this.queryParams.groupId = groupId
        this.queryParams.pageNumber = 1
        this.getDevices()
      },
      getDevices() {
        fetchDeviceList(this.queryParams).then(data => {
          this.list = data.data.content
          this.total = data.data.totalElements
        })
      },
      getGroups() {
        this.listLoading = true
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
          }
          this.groups = data.data
          this.rgParam.groudId = this.groups[0] ? this.groups[0].id : ''
          this.queryParams.groupId = this.groups[0] ? this.groups[0].id : ''
          this.getDevices()
          this.listLoading = false
        })
      },
      handleCurrentChange(val) {
        this.queryParams.pageNumber = val
        this.getDevices()
      },
      handleMounted(x, y) {
        const dataAxis = x
        const data = y
        const yMax = 5000
        const dataShadow = []

        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax)
        }
        const option = {
          baseOption: {
            timeline: {
              // y: 0,
              axisType: 'category',
              // realtime: false,
              // loop: false,
              autoPlay: false,
              // currentIndex: 2,
              playInterval: 1000,
              // controlStyle: {
              //     position: 'left'
              // },
              data: x
            },
            title: {
              text: '仪表001温度分析',
              left: 'center',
              textStyle: {
                align: 'center',
                color: '#fff',
                width: '100%',
                fontSize: 20
              }
            },
            xAxis: {
              data: dataAxis,
              axisLabel: {
                inside: false,
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              z: 10
            },
            yAxis: {
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              }
            },
            series: [
              { // For shadow
                type: 'bar',
                itemStyle: {
                  color: 'rgba(0,153,255,0.0)',
                  borderRadius: 2
                  // borderWidth: 2,
                  // borderColor: '#0099FF'
                  // normal: { color: 'rgba(0,0,0,0.05)' }
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataShadow,
                animation: false
              },
              {
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                  color: '#FFF'
                },
                itemStyle: {
                  color: 'rgba(0,153,255,0.30)',
                  borderWidth: 2,
                  borderColor: '#0099FF',
                  borderRadius: 2,

                  // normal: { color: 'rgba(0,0,0,0.05)'
                  emphasis: {
                    color: 'rgba(0,153,255,0.30)'
                  }
                },
                data: data
              }
            ]
          },
          options: [
            { // 这是'2002-01-01' 对应的 option
              title: {
                text: '仪表001压力分析'
              },
              series: [
                {data: y}
              ]
            },
            { // 这是'2002-01-01' 对应的 option
              title: {
                text: '02'
              },
              series: [
                {data: y}
              ]
            }
          ]
        }
        const chat = this.$echarts.init(document.getElementById('watch-0'))
        // 绘制图表
        chat.setOption(option)
      },
      selectSNChange() {
        this.search()
      }
    }
  }
</script>
<style lang="css" scoped>
  .el-checkbox:first-child {
    margin-left: 30px;
  }

  .el-select > .el-input {
    background-image: none !important;
  }

  .is-error > .el-input {
    border: 1px red solid;
  }

  .el-radio-button__inner {
    border-radius: 5px;
  }
</style>
